<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="grid">
        <div>
          <label for="">编号</label>
          <input type="text" v-model="id" :disabled="flag" v-focus />
          <label for="">名称</label>
          <input type="text" v-model="name" />
          <input
            type="button"
            value="提交"
            @click="handle"
            :disabled="submitFlag"
          />
        </div>

        <div>
          <span v-cloak>图书总数：{{total}}</span>
        </div>
        <table>
          <thead>
            <tr>
              <th>编号</th>
              <th>名称</th>
              <th>时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr :key="item.id" v-for="item in books" v-cloak>
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.date | format('yyyy-MM-dd')}}</td>
              <td>
                <a href="" @click.prevent="toEdit(item.id)">修改</a>
                <span>|</span>
                <a href="" @click.prevent="deleteBook(item.id)">删除</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>
  <script src="./vue.js"></script>
  <script>
    Vue.directive("focus", {
      inserted: function(el) {
        el.focus();
      }
    });
    Vue.filter("format", function(value, arg) {
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          M: date.getMonth() + 1, //月份
          d: date.getDate(), //日
          h: date.getHours(), //小时
          m: date.getMinutes(), //分
          s: date.getSeconds(), //秒
          q: Math.floor((date.getMonth() + 3) / 3), //季度
          S: date.getMilliseconds() //毫秒
        };

        format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = "0" + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === "y") {
            return (date.getFullYear() + "").substr(4 - all.length);
          }
          return all;
        });
        return format;
      }
      return dateFormat(value, arg);
    });
    var vm = new Vue({
      el: "#app",
      data: {
        id: "",
        name: "",
        flag: false,
        submitFlag: false,
        date: new Date(),
        books: []
      },
      methods: {
        handle: function() {
          if (this.flag) {
            /*  编辑 */
            /*     就是根据当前的ID去更新数组中对应的数据 */
            this.books.some(item => {
              if (item.id == this.id) {
                item.name = this.name;
                item.date = this.date;
                /*     终止遍历 */
                return true;
              }
            });
            this.flag = false;
          } else {
            /*     添加 */
            let book = {};
            book.id = this.id;
            book.name = this.name;
            book.date = this.date;
            this.books.push(book);
            /*   清空表单 */
            this.id = "";
            this.name = "";
          }
          this.id = "";
          this.name = "";
        },
        toEdit: function(id) {
          console.log(id);
          //根据ID查询出要编辑的数据
          let book = this.books.filter(function(item) {
            return item.id == id;
          });
          console.log(book);
          //把获取到的信息填充到表单
          this.id = book[0].id;
          this.name = book[0].name;
          this.flag = true;
        },
        deleteBook: function(id) {
          /*           // 根据id从数组中查找元素的索引 *
          let index = this.books.findIndex(function(item) {
            return (item.id = id);
          });
          //根据索引删除数组元素
          this.books.splice(index, 1); */
          /*     方法二：通过filter方法进行删除 */
          this.books = this.books.filter(function(item) {
            return item.id != id;
          });
        }
      },
      computed: {
        total: function() {
          return this.books.length;
        }
      },
      watch: {
        id: function(val) {
          let flag = this.books.some(function(item) {
            return item.id == val;
          });
          if (flag) {
            this.submitFlag = true;
          } else {
            this.submitFlag = false;
          }
        }
      },
      mounted: function() {
        //该生命周期钩子函数被触发的时候 模板已经可以使用
        // 一般此时用于获取后台数据，然后把数据填充到模板
        let data = [
          {
            id: 0,
            name: "三国演义",
            date: 2525609975000
          },
          {
            id: 1,
            name: "红楼梦",
            date: 2525609975000
          },
          {
            id: 2,
            name: "水浒传",
            date: 2525609975000
          },
          {
            id: 3,
            name: "西游记",
            date: 2525609975000
          }
        ];
        this.books=data;
      }
    });
  </script>
</html>
